<template>
  <section class="organization_chart_tree">
    <vue2-org-tree
      :data="tree"
      :props="defaultProps"
      labelClassName="organization_chart_tree_node"
    />
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "organizationChartTree",
  data() {
    return {
      defaultProps: {
        children: "childrenList",
        label: "name",
        value: "code"
      }
    };
  },
  computed: {
    ...mapGetters({
      tree: "organizationChart/tree"
    })
  },
};
</script>
<style lang="scss">
.organization_chart_tree {
  background-color: rgba(239, 242, 250, 1);
  text-align: center;
  margin-top: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  .org-tree-container {
    background-color: transparent;
  }
}
.organization_chart_tree_node {
  background-color: #ffffff;
  font-size: 14px;
  padding: 10px !important;
}
</style>
